<%@ page contentType="text/html; charset=utf-8" language="java" %>
  <section role="banner">
     <hgroup>
         <h1>caronas...</h1>
         <h2>Use esse espaço para combinar caronas para a UFPB</h2>
     </hgroup>
     
     
   <%@ include file="_modal_messages.jsp" %>
   <article role="main" class="clearfix">
        <div id="caronasList" class="post">
						
						<h2>Últimas caronas:</h2> <br />
						<table id="caronasLista" align="center" border="2" >
							<thead>
								<tr>
									<th>Interessado</th>
									<th>Horário</th>
									<th>Origem</th>
									<th>Destino</th>
									<th>Vagas</th>
									<th>Ações</th>
								</tr>
							</thead>
							<tbody>
								<c:forEach items="${caronaList}" var="carona">
									<tr>
										<td>${carona.usuario.nome }</td>
										<td><fmt:formatDate value="${carona.data}" pattern="dd/MM/yyyy HH:mm:ss" /></td>
										<td>
											${carona.origem.enderecoExibicao }
										</td>
										<td>
											${carona.destino.enderecoExibicao }<br />
											
										</td>
										<td>${carona.vagas }</td> 
										<td>
										<c:if test="${not empty usuarioWeb.usuario and usuarioWeb.usuario.id == carona.usuario.id }">
										  <div class="btn-group">
											  <a class="a-watch extended btn carona-${carona.id }" role="button" rel="tooltip" title="Visualizar carona"><i class="icon-folder-open"></i></a>
											 
												<form action="<c:url value="/carona/remove/${ carona.id }" />" method="post">
													<button class="b-submit" class="btn" style="width: 100%" type="submit" title="Excluir" ><i class="icon-remove"></i></button>
												</form>
												
										</div>
										</c:if>
										<c:if test="${empty usuarioWeb.usuario or usuarioWeb.usuario.id != carona.usuario.id }">
											  
												<a class="a-watch btn carona-${carona.id }"  role="button" title="Detalhes" ><i class="icon-hand-right"></i></a>
											  
										</c:if>
										</td>
						            </tr>
								</c:forEach>
							</tbody>
						</table>
						<div class="modal" id="detailModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
							<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
									<h3 id="myModalLabel">Detalhes da carona</h3>
									</div>
									<div class="modal-body">
									  <div id="passengerList"><h5 class="listTitle">Passageiros: </h5></div>
										<p id="cLoadInfo" >Carregando informações...</p>
										<div id="cInformation" class="hidden">
										<p id="cMaster">Oferecimento: <span id="caronaOwn"></span></p>
										<p id="cPerfil">Perfil: <span id="fbPerfil"></span></p>
										<p id="cTime">Horário: <span></span> </p>
										<p id="cNeibor01" >Bairro de Origem: <span></span> </p>
										<p id="cNeibor02" >Bairro de Destino: <span></span> </p>
										
										<p id="cAddress01">Endereço de Origem: <span></span> </p>
										<p id="cAddress02">Endereço de Destino: <span></span> </p>
										
										<p id="cDelay">Possível Atraso: <span></span> </p>
										<span id="cUsername" class="hidden"></span>
										
										 <img src="" />										 
										</div>
										
										<div id="requiredInfo">
                     <label id="messageLabel" for="rideMessage">Para continuar, digite uma mensagem de apresentação para o dono da carona, que será enviada com a sua solicitação. </label>
                     <textarea id="rideMessage" ></textarea>
                     </div>
                     
                     <div id="confirmedInfo">
                       <h4 id="confirmLabel" for="confirmMessage"> </h4>
                     </div>
									</div>
									<div class="modal-footer">
									<button id="closeRide" class="btn" data-dismiss="modal" aria-hidden="true">Fechar</button>
									<button id="getRide" class="btn btn-primary">Pegar carona</button>
							</div>
					</div>
				</div>
    </article>
  </section>